<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4 heading">
  <h1 class="h3 mb-0 text-gray-800">Findings > {{ key }}</h1>
</div>

<div class="row">

  <div class="col-lg-12" id="findings">

    <div :class="'card mb-4 py-3 border-left-' + item.status" v-for="item in filteredList('{{ key }}')">

      {% raw %}
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div :class="'text-s font-weight-bold text-uppercase mb-1 text-' + item.status">
              {{ item.group_title }} <span class="badge text-bg-secondary" v-if="item.items"
                style="color:#ffffff !important;">{{
                item.items.length
                }}</span>
              <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right"
                :data-bs-title="item.info">
                <span class="fas fa-question-circle"></span>
              </button>
            </div>
            <div v-for="i in item.items">
              <span>- {{ i }}</span>
            </div>
          </div>
        </div>
      </div>
      {% endraw %}

    </div>

  </div>

</div>
